<template>
	<div class="wrap">
		<!-- 个人中心头部 -->
		<div class="img-bg">
			<img src="@/assets/img/default.png" alt="" />
			<div class="demo-basic--circle">
				<img id="avatar"  :src="imageUrl" class="avatar" />
			</div>
		</div>
		<!-- 个人中心信息展示 -->
		<div class="show-info">
			<!-- 个人基本信息展示区域 -->
			<div class="info">
				<ul class="list">
					<li>
						<div class="adminname">姓名：{{ admin.houName }}</div>
						<div>性别：{{ admin.sex == 2 ? '女' : '男' }}</div>
						<div>管理楼栋：{{ admin.buildId }} 栋</div>
					</li>
					<li>
						<div>管理员编号：{{ admin.houId }}</div>
						<div>年龄：{{ admin.age }}</div>
						<div>创建时间：{{ createTime }}</div>
					</li>
					<li>
						<div>电话：{{ admin.phone }}</div>
						<div>邮箱：{{ admin.email }}</div>

						<div>最近一次访问时间：{{ updateTime }}</div>
					</li>
				</ul>
				<el-button type="primary" @click="dialogFormVisible = true">完善个人信息</el-button>
			</div>

			<!-- 修改信息对话框 -->
			<el-dialog width="500" v-model="dialogFormVisible">
				<template #header>
					<h2 class="title">完善个人信息</h2>
				</template>
				<el-form label-position="top" label-width="60">
					<el-form-item label="姓名">
						<el-input v-model.trim="form.houName" />
					</el-form-item>
					<el-form-item label="职工号">
						<el-input v-model.number="form.houId" readonly />
					</el-form-item>
					<el-form-item label="年龄">
						<el-input v-model.number="form.age" />
					</el-form-item>
					<el-form-item label="电话号码">
						<el-input v-model.trim="form.phone" />
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input v-model.trim="form.email" />
					</el-form-item>
					<el-form-item label="修改密码">
						<el-input v-model.trim="form.password"  type="password"/>
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="submitModInfo" plain>确认修改</el-button>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { useUserStore } from '@/stores/userStore'
import { computed, reactive, ref ,getCurrentInstance} from 'vue'
import { changeHouInfo } from '@/utils/axios/domiRequests'
import { getUserInfo } from '@/utils/axios/stuReqest'
import { debounce } from '@/utils/tools'
import useRegStore from '@/stores/useReg'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const { handleCheckEmail, phoneIsOk } = useRegStore()
const dialogFormVisible = ref(false)

// 获取pinia仓库中的用户信息
const admin = userStore.userInfo

const imageUrl = ref('https://img1.baidu.com/it/u=731000468,217848770&fm=253&fmt=auto&app=120&f=PNG?w=499&h=261')

const getImgUrl = computed(() => 'http://8.130.68.204:9090' + admin.img)

// 转换时间格式
const createTime = computed(() => new Date(admin.createTime).toLocaleDateString())
const updateTime = computed(() => new Date(admin.updateTime).toLocaleDateString())

//
const form = reactive({
	houName: userStore.userInfo?.houName,
	houId: admin.houId,
	sex: userStore.userInfo?.sex,
	phone: userStore.userInfo?.phone,
	email: userStore.userInfo?.email ?? '',
	password: '',
	age: admin.age ?? 40,
})

const checkForm = () => {
	if (form.houName?.length > 20) {
		ElMessage.warning({ message: '名字过长', duration: 1000 })
		return false
	}
	if (form?.password?.length > 20) {
		ElMessage.warning({ message: '密码过长', duration: 1000 })
		return false
	}
	if (!Number.isInteger(form.age) || form.age > 110 || form.age < 0) {
		ElMessage.warning({ message: '年龄不符合', duration: 1000 })
		return false
	}
	if (!phoneIsOk(form.phone)) {
		ElMessage.warning({ message: '手机号不符合', duration: 1000 })
		return false
	}
	if (!handleCheckEmail(form.email)) {
		ElMessage.warning({ message: '邮箱格式不规范', duration: 1000 })
		return false
	}

	return true
}

// 提交完善个人信息
const submitModInfo = debounce(async () => {
	if (!form.password) delete form.password
	if (!checkForm()) return
	if (form.password) {
		form.password = await proxy.$md5(form.password)
	}
	await changeHouInfo(form)
	let { data } = await getUserInfo('/hou/getHouInfo')
	userStore.userInfo = data
	dialogFormVisible.value = false
})

</script>

<style scoped lang="sass">
.btn
 background: rgb(0, 202, 237)
 color: #ffff


.el-form
  width: 280px
  margin: auto
.form-row
    width: 100%
.el-input
    width: 200px
.wrap
  border-radius: 10px
  padding: 0

// 修改个人信息动画样式
.change-enter-active,
.change-leave-active
  transition: all 0.5s ease

.change-enter-from,
.change-leave-to
  opacity: 0
  transform: translateX(30px)

// 修改个人信息
.changInfo
  margin-top: 20px

.img-bg
  position: relative
  border-radius: 10px
  img
    // height: 200px
    width: 100%
    border-radius: 10px 10px 0 0
//头像设置
.demo-basic--circle
  position: absolute
  bottom: -40px
  left: 60px
  height: 120px
  border-radius: 50%
  border: 5px solid #ffff
  background-color: #fff

.el-icon
  position: absolute
  bottom:13px
  right: 3px
  color: #ffff
  width: 20px
  height: 20px
  border-radius: 50%
  background: rgb(135,206,235)

//个人信息展示
.adminname
  font-weight: 600
  font-size: 20px
.show-info
  // border: 1px solid black
  min-height: 200px
  margin: 100px 60px
  padding: 5px

  .info
    width: 100%
    min-height: 100px

    .el-button
      margin: 5px
      padding: 5px

.list
  width: 100%
  li
    padding: 5px
    // width: 60%
    display: flex
    justify-content: space-between
    div
      min-width: 250px
      padding: 5px
      cursor: pointer
      &:hover
        border-radius: 10px
        box-shadow: 0 0 2px #ccc
</style>
